<template>
    <el-dialog
        v-model="addVisible"
        :title="titles + '打印预览'"
        width="60%"
        :before-close="handleClose"
        top="2vh"
    >
        <div>
            <el-table :data="tableData" id="myTable1Prints" style="width: 100%" size="small" border>
                <el-table-column
                    :prop="item.code"
                    :label="item.name"
                    :width="item.width"
                    v-for="(item, index) in headers"
                    :key="index"
                />
            </el-table>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" size="small" v-print="printObj"> 确定打印 </el-button>

                <el-button size="small" @click="close">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, computed, defineEmits, onMounted, watch, toRaw } from 'vue'

import type { FormInstance, FormRules } from 'element-plus'

import { ElMessage } from 'element-plus'

const props = defineProps({
    addVisible: Boolean,

    info: Array
})

const titles = ref()

const printObj = ref({
    id: 'myTable1Prints',

    popTitle: '',

    extraCss:
        'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',

    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',

    previewBeforeOpenCallback() {
        console.log('正在加载预览窗口')
    },

    previewOpenCallback() {
        console.log('已经加载完预览窗口')
    },

    beforeOpenCallback(vue: any) {
        //   vue.printLoading = true

        console.log('打开之前')
    },

    openCallback(vue: any) {
        //   vue.printLoading = false

        console.log('执行了打印')
    },

    closeCallback() {
        console.log('关闭了打印工具')
    },

    clickMounted(vue: any) {
        console.log('点击了打印按钮')

        emits('Closeprint')

        // vue.printSet.popTitle = vue.tableHead // 动态设置页眉
    }
})

const tableData = ref<any>([])

const backData = ref()

const headers = ref<any>([])

//监听

watch(
    () => props.info,

    (newInfo, oldInfo) => {
        // console.log(newInfo)

        if (newInfo != undefined) {
            backData.value = JSON.parse(newInfo as any)

            tableData.value = backData.value.data

            titles.value = backData.value.title

            printObj.value.popTitle = backData.value.title

            headers.value = backData.value.header
        } else {
        }
    }
)

//defineEmits用于定义回调事件，里面是数组，可以定义多个事件

const emits = defineEmits(['Closeprint'])

const handleClose = (done: () => void) => {
    emits('Closeprint')
}

onMounted(() => {})

const close = () => {
    emits('Closeprint')
}
</script>

<style lang="scss" scoped></style>
